<template>
    <div>
      <canvas ref="canvas" width="450" height="450"></canvas>
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
      this.drawBeamPattern();
    },
    methods: {
      drawBeamPattern() {
        const canvas = this.$refs.canvas;
        const ctx = canvas.getContext('2d');
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = Math.min(centerX, centerY) - 40; // 圆形画布半径
        const N = 10; // 天线数量
        const d = 0.2; // 天线间距（波长）
        const theta = 0; // 目标方向角（度）
        const lambda = 1; // 波长（归一化）
  
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
  
        // 绘制 12 个坐标刻度和角度标注
        ctx.strokeStyle = '#ccc'; // 坐标线颜色
        ctx.fillStyle = '#000'; // 角度标注颜色
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
  
        const labelRadius = radius + 20; // 调整角度标注的半径，防止被遮挡
  
        for (let i = 0; i < 12; i++) {
          const angle = (i * 30 * Math.PI) / 180; // 每 30° 一个刻度
          const x1 = centerX + radius * Math.cos(angle);
          const y1 = centerY - radius * Math.sin(angle);
          const x2 = centerX + (radius + 5) * Math.cos(angle);
          const y2 = centerY - (radius + 5) * Math.sin(angle);
  
          // 绘制坐标线
          ctx.beginPath();
          ctx.moveTo(centerX, centerY);
          ctx.lineTo(x1, y1);
          ctx.stroke();
  
          // 绘制刻度
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.stroke();
  
          // 标注角度
          const labelX = centerX + labelRadius * Math.cos(angle);
          const labelY = centerY - labelRadius * Math.sin(angle);
          const labelText = `${i * 30}°`;
  
          // 绘制角度标注
          ctx.fillText(labelText, labelX, labelY);
        }
  
        // 绘制天线位置（沿 x 轴正方向排布）
        ctx.fillStyle = '#00f'; // 天线颜色
        for (let n = 0; n < N; n++) {
          const antennaX = centerX + n * d * 50; // 沿 x 轴正方向排布，间距为 d * 50（缩放比例）
          const antennaY = centerY;
          ctx.beginPath();
          ctx.arc(antennaX, antennaY, 3, 0, 2 * Math.PI); // 绘制天线点
          ctx.fill();
        }
  
        // 计算并绘制瓣状图形
        ctx.beginPath();
        for (let phi = -90; phi <= 90; phi += 1) {
          const phiRad = (phi * Math.PI) / 180; // 转换为弧度
          let sum = 0;
          for (let n = 0; n < N; n++) {
            const phase = ((2 * Math.PI * d * n) / lambda) * Math.sin(phiRad - (theta * Math.PI / 180)); // 应用 theta
            sum += Math.cos(phase); // 假设权重为 1
          }
          const magnitude = Math.abs(sum); // 辐射强度
          const scale = radius / Math.max(...Array.from({ length: 181 }, (_, i) => {
            const angle = (-90 + i) * Math.PI / 180;
            let s = 0;
            for (let n = 0; n < N; n++) {
              s += Math.cos(((2 * Math.PI * d * n) / lambda) * Math.sin(angle - (theta * Math.PI / 180))); // 应用 theta
            }
            return Math.abs(s);
          })); // 动态缩放比例
          const x = centerX + scale * magnitude * Math.cos(phiRad);
          const y = centerY - scale * magnitude * Math.sin(phiRad);
          if (phi === -90) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        }
        ctx.strokeStyle = '#f00';
        ctx.stroke();
      }
    }
  };
  </script>
  
  <style scoped>
  canvas {
    border: 1px solid #000;
    border-radius: 50%; /* 将画布显示为圆形 */
    margin: 10px;
  }
  </style>